import 'package:flutter/material.dart';
import 'package:ui_templates/app_theme.dart';

class HomeDrawer extends StatefulWidget {
  HomeDrawer({
    super.key,
    required this.index,
    required this.onSelectedChange,
    required this.animation,
    required this.closeHandle,
  });

  final DrawerIndex index;
  final void Function(DrawerIndex selected) onSelectedChange;
  final void Function() closeHandle;
  final AnimationController animation;

  @override
  State<HomeDrawer> createState() => _HomeDrawerState();
}

class _HomeDrawerState extends State<HomeDrawer>
    with SingleTickerProviderStateMixin {
  List<DrawerItem> drawerList = [];
  DrawerIndex currentIndex = DrawerIndex.HOME;

  @override
  void initState() {
    //初始化

    setDrawerList();
    // // widget.animation.addListener(() {
    // //   print(widget.animation.value);
    // // });
    // _controller.addListener(() {
    //   print(widget.animation.value);
    // });

    super.initState();
  }

  void setDrawerList() {
    drawerList.addAll([
      DrawerItem(
        labelName: "Home",
        index: DrawerIndex.HOME,
        icon: const Icon(Icons.home),
      ),
      DrawerItem(
        labelName: "Help",
        index: DrawerIndex.Help,
        icon: const Icon(Icons.help),
      ),
      DrawerItem(
        labelName: "FeedBack",
        index: DrawerIndex.FeedBack,
        icon: const Icon(Icons.feedback),
      ),
      DrawerItem(
        labelName: "Invite Friend",
        index: DrawerIndex.Invite,
        icon: const Icon(Icons.people),
      ),
      DrawerItem(
        labelName: "Rate the app",
        index: DrawerIndex.Share,
        icon: const Icon(Icons.share),
      ),
      DrawerItem(
        labelName: "About Us",
        index: DrawerIndex.About,
        icon: const Icon(Icons.info),
      ),
    ]);
  }

  Widget createDrawerItem(DrawerItem item) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        splashColor: Colors.grey.withOpacity(0.1),
        highlightColor: Colors.transparent,
        onTap: () {
          print("click");
          widget.onSelectedChange(item.index as DrawerIndex);
          setState(() {
            currentIndex = item.index as DrawerIndex;
          });
          widget.closeHandle();
        },
        child: SizedBox(
          height: 40,
          child: Stack(
            children: [
              SizedBox(
                height: 40,
                child: Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      //  icon or image
                      item.isAssetsImage
                          ? Container(
                              width: 24,
                              height: 24,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(item.imageName),
                                    fit: BoxFit.cover),
                              ),
                            )
                          : Icon(
                              item.icon!.icon,
                              color: currentIndex == item.index
                                  ? Colors.blueAccent
                                  : Colors.black,
                            ),
                      const SizedBox(width: 20),
                      Text(item.labelName, style: AppTheme.title),
                    ],
                  ),
                ),
              ),
              LayoutBuilder(builder: (context, constrains) {
                // print("装饰进度条width:${constrains.maxWidth * .8}");
                return SlideTransition(
                  position:
                      Tween(begin: const Offset(0, 0), end: const Offset(-1, 0))
                          .animate(widget.animation),
                  child: Opacity(
                    opacity: .3,
                    child: Container(
                      width: constrains.maxWidth * 0.8,
                      height: 40,
                      decoration: BoxDecoration(
                        color: currentIndex == item.index
                            ? Colors.cyan[300]
                            : Colors.transparent,
                        borderRadius: const BorderRadius.only(
                          topRight: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                      ),
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.white,
              AppTheme.darkGrey.withOpacity(.3),
              AppTheme.darkGrey.withOpacity(.5),
            ],
            stops: const [0.94, .98, 1],
          ),
        ),
        child: Column(
          children: [
            //  acount
            Container(
              width: double.infinity,
              height: 200,
              color: Colors.brown,
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Align(
                  alignment: Alignment.bottomLeft,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      ScaleTransition(
                        scale: Tween<double>(begin: 0.8, end: 1)
                            .animate(widget.animation),
                        child: RotationTransition(
                          turns: Tween<double>(begin: 0, end: .3)
                              .chain(CurveTween(curve: Curves.bounceIn))
                              .animate(widget.animation),
                          child: Container(
                            width: 120,
                            height: 120,
                            child: ClipOval(
                              child: Image.asset(
                                "assets/images/userImage.png",
                              ),
                            ),
                          ),
                        ),
                      ),
                      const Text("Chris Hemsworth", style: AppTheme.title)
                    ],
                  ),
                ),
              ),
            ),
            const Divider(
              thickness: 1,
              height: 1,
            ),
            /*

            * When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.*/
            //原版的设计和我们有所区别
            Expanded(
              child: ListView(
                  //expand相当于js中的flat,其实有点问题
                  children: [
                    ...(drawerList
                        .map((item) {
                          return [
                            createDrawerItem(item),
                            const SizedBox(width: double.infinity, height: 10)
                          ];
                        })
                        .expand((element) => element)
                        .toList()),
                  ]),
            ),
            Divider(
              color: AppTheme.darkGrey.withOpacity(.5),
              thickness: 1.5,
            ),
            SizedBox(
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 8.0),
                    child: TextButton(
                      onPressed: () {},
                      child: const Text("Sign Out", style: AppTheme.title),
                    ),
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.close, color: Colors.deepOrange),
                  )
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).padding.bottom),
            )
          ],
        ),
      ),
    );
  }
}

enum DrawerIndex {
  HOME,
  FeedBack,
  Help,
  Share,
  About,
  Invite,
  Testing,
}

class DrawerItem {
  DrawerItem({
    this.isAssetsImage = false,
    this.labelName = '',
    this.icon,
    this.index,
    this.imageName = '',
  });

  bool isAssetsImage;
  String labelName;
  Icon? icon;
  DrawerIndex? index;
  String imageName;
}
